<template>
<div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px;margin-right: 10px;" placeholder="请输入球队名称" suffix-icon="el-icon-search" v-model="teamName"></el-input>

      <el-select v-model="league" clearable placeholder="请选择联赛" style="width: 300px;margin-right: 10px;">
        <el-option v-for="item in options" :key="item.leagueName" :label="item.leagueSeason+item.leagueName" :value="item.id">
            {{ item.leagueSeason+item.leagueName }}
        </el-option>
      </el-select>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
     <el-upload action="http://localhost:9090/team/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
      <el-button type="primary" class="ml-5">导入球队<i class="el-icon-bottom"></i></el-button>
      </el-upload>
      <el-button type="primary" @click="exp" class="ml-5">导出球队<i class="el-icon-top"></i></el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="teamName" label="球队名称"></el-table-column>
      <el-table-column prop="teamImg" label="球队图片">
        <template slot-scope="scope">
          <div v-if="scope.row.teamImg">
             <img :src="scope.row.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="teamCoach" label="球队教练"></el-table-column>
      <el-table-column prop="teamProfile" label="球队简介" width="300"></el-table-column>
      <el-table-column prop="teamHome" label="主场球场"></el-table-column>
      <el-table-column prop="teamCreate" label="成立时间"></el-table-column>
      <el-table-column label="操作"  width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleagueWatch(scope.row)" ><i class="el-icon-medal"></i>查看参加的联赛</el-button>
          <el-button type="success" @click="handleEdit(scope.row)"> <i class="el-icon-edit"></i>编辑</el-button>
          <el-button type="warning" @click="teamAbility(scope.row)" ><i class="el-icon-s-markting"></i>球队能力</el-button>
          <el-button type="info" @click="teamPlayer(scope.row)" ><i class="el-icon-s-markting"></i>查看球队阵容</el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="球队信息" :visible.sync="dialogFormVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="球队名称">
          <el-input v-model="form.teamName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="球队图片">
          <el-upload 
            class="avatar-uploader"
            :action="'http://' + serverIp +':9090/file/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="form.teamImg" :src="form.teamImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item label="球队教练">
          <el-input v-model="form.teamCoach" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="球队简介">
          <el-input type="textarea" v-model="form.teamProfile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主场球场">
          <el-input v-model="form.teamHome" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="球队成立时间">
          <!-- <el-input v-model="form.teamCreate" autocomplete="off"></el-input> -->
          <el-date-picker
            v-model="form.teamCreate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="参加的联赛" :visible.sync="leagueDialogVis" width="30%">
      <el-tree
          :props="props"
          :data="leagueData"
          node-key="id"
          ref="tree">
         <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.leagueSeason+data.leagueName }}</span>
         </span>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="leagueDialogVis = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="球队能力" :visible.sync="AbilityDialogVis" width="30%">
      <el-form label-width="100px" size="small">
        <el-form-item label="球队整体评价">
          <el-input v-model="Abilityform.capability" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="球队进攻能力">
          <el-input v-model="Abilityform.attack" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="球队防守能力">
          <el-input v-model="Abilityform.defense" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="球队擅长阵型">
          <el-select v-model="Abilityform.formation" clearable placeholder="请选择阵型" style="width: 300px">
        <el-option v-for="item in formationoptions" :key="item.name" :label="item.name" :value="item.value">
            {{ item.name}}
        </el-option>
        </el-select> 
        <div v-if="Abilityform.formation">
          <img :src="Abilityform.formation" width="120" height="120">
        </div>
        <div v-else>无图片</div>      
        
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAbility">确 定</el-button>
        <el-button @click="AbilityDialogVis = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="球队阵容" :visible.sync="playerDialogVis" width="30%">
      <span style="margin-left:23px">{{ "姓名"+"      "+"号码"+"     "+"位置"+"     "+"身价"}} </span>
          <el-tree
              :props="newprops"
              :data="playerData"
              node-key="id"
              ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
              {{ data.playerName+"  "+data.playerNumber+"号  "+data.playerPosition+" "+data.playerValue+"万欧元"}} 
                </span>
            </span>
          </el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="playerDialogVis = false">取 消</el-button>
          </div>
    </el-dialog>


  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name:'Team',
  data(){
    return{
      tableData: [],
      total: 0,//总数
      current: 1,//当前页
      size: 5,//每页数量
      teamName:"" ,//球队名搜索输入框
      form:{},//添加或修改提交表单
      dialogFormVisible: false,
      Abilityform:{
        capability:"",
        attack:"",
        defense:"",
        formation:""
      },//球队能力相关编辑表单
      AbilityDialogVis:false,
      multipleSelection: [],
      options:[],//根据联赛选择框搜索球队
      formationoptions:[],//球队阵型
      serverIp: serverIp,
      leagueData:[],//参加的联赛表单
      leagueDialogVis:false,
      teamId:0,
      props: {
        label: 'leagueName',
      },
      newprops:{
        label: 'playerName',
      },
      league:"",//联赛id查询用
      leagueName:"",
      AbilityTeamId:0,//编辑球队能力时先获取teamid
      playerDialogVis:false,//球队阵容
      playerData:[],//球队阵容表单
    }
  },
  created(){
    this.load()
  },
  methods:{
    load(){
      this.request.get("/team/pageTeam", {
        params: {
          current: this.current,
          limit: this.size,
          teamName: this.teamName,
          league:this.league
        }
      }).then(res => {
        this.tableData = res.pageTeam.records
        this.total = res.total
      }),
      //查询所有联赛信息到选择框中
      this.request.get("/league/findall").then(res=>{
        console.log(res.data)
        this.options = res.data
      })
    },
    //添加或修改球队信息
    save() {
        this.request.post("/team/saveOrUpdate", this.form).then(res => {
          if (res.code === '200') {
            this.$message.success("保存成功")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("保存失败")
          }
        })
      },
    //编辑球队能力值
    saveAbility(){
      this.request.post("/team/saveAbility", this.Abilityform,
      {
        params:{
        teamId:this.AbilityTeamId
        }
      }
      ).then(res => {
          if (res.code === '200') {
            this.$message.success("保存成功")
            this.AbilityDialogVis = false
          } else {
            this.$message.error("保存失败")
          }
        })
    },
    //查看球队参加的联赛
    async handleagueWatch(team){
        this.teamId=team.id
        this.request.get("/team/findleaguelist/"+this.teamId).then(res =>{
          console.log(res.data)
          this.leagueData = res.data
        })
        this.leagueDialogVis = true;
    },

    //查看球队阵容(该球队的球员阵容，包括球员姓名，球员号码，场上位置)
    teamPlayer(row){
      this.teamId = row.id
      this.request.get("/team/getTeamPlayerList",{
        params:{
          teamId:this.teamId
        }
      }).then(res=>{
        console.log(res.data)
        this.playerData = res.data
      })
      this.playerDialogVis = true;
    },

    
    //保存图片
    handleAvatarSuccess(res) {
      this.form.teamImg = res
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },

    teamAbility(row){
      this.Abilityform = {};
      //先获取选中的球队id值
      this.AbilityTeamId = row.id
      console.log(this.AbilityTeamId)
      this.AbilityDialogVis = true
      //查看球队能力值
      this.request.get("/team/getTeamAbility",{
        //后端接收参数
        params:{
          teamId:this.AbilityTeamId
        }
      }).then(res=>{
        if(res.data){
          this.Abilityform = res.data;
        } 
      })
      //查询球队阵型
        this.request.get("/team/formation").then(res =>{
        console.log(res)
        this.formationoptions = res.data
      })
    },
    del(id) {
      this.request.delete("/team/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      this.request.post("/team/delete/batch", ids).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.teamName = ""
      this.league = ""
      this.load()
    },
    //分页每页大小
    handleSizeChange(size) {
      console.log(size)
      this.size = size
      this.load()
    },

    //分页第几页
    handleCurrentChange(current) {
      console.log(current)
      this.current = current
      this.load()
    },
    //导出
    exp(){
      window.open("http://localhost:9090/team/export")
    },
    //提示文件导入成功
    handleExcelImportSuccess(){
      this.$message.success("导入球队信息成功")
      this.load()
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>